<template>
    <el-container>
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item v-for="item in list" :index="item.key">
                    {{ item.name }}
                </el-menu-item>
            </el-menu>
            <div>
                <el-dropdown size="large">
                    <span class="el-dropdown-link">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item icon="User" @click="clickUserInfo">个人信息</el-dropdown-item>
                            <el-dropdown-item icon="SwitchButton" @click="exit">退出登陆</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </div>
        </el-header>
        <el-main ref="elMainRef">
            <div :class="{ item: item.key != 'activeIndex1', firstItem: item.key == 'activeIndex1' }"
                v-for="item in list" :id="item.key">
                <div v-if="item.key === 'activeIndex1'">
                    <div class="btnGroup">
                        <div>
                            <el-button type="success" :disabled="isConnected" @click="openSocket">打开连接</el-button>
                            <el-button type="danger" :disabled="!isConnected" @click="closeSocket">关闭连接</el-button>
                        </div>
                        <div>
                            连接状态:
                            <el-icon size="20">
                                <BellFilled :style="{ color: heartConnected === false ? 'red' : 'green' }" />
                            </el-icon>
                        </div>
                    </div>
                    <el-table :border="true" :stripe="true" size="large"
                        :data="messages.slice((pageOption.currentPage - 1) * pageOption.pageSize, pageOption.currentPage * pageOption.pageSize)"
                        style="width: 100%;margin-top: 5px;">
                        <el-table-column prop="hours" label="时" :align="'center'" />
                        <el-table-column prop="minutes" label="分" :align="'center'" />
                        <el-table-column prop="seconds" label="秒" :align="'center'" />

                    </el-table>
                    <el-pagination layout="prev, pager, next" :total="messages.length" @change="pageChange" size="large"
                        :default-current-page="pageOption.currentPage" :default-page-size="pageOption.pageSize" />
                </div>
                <template v-else-if="item.key === 'activeIndex2'">
                    <div>
                        canvas简单使用
                    </div>
                    <canvas id="myCanvas" width="500" height="500">
                    </canvas>

                </template>
                <div v-else>
                    {{ item.name }}
                </div>
            </div>
        </el-main>
    </el-container>

</template>


<script setup lang="ts">
import './index.less'
import { onMounted, reactive, ref, watch } from 'vue';
import { useWebSocket } from '../../hooks/useWebSocket'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const elMainRef = ref(null)

const router = useRouter();
const activeIndex = ref('activeIndex1')
let pageOption = reactive({
    pageSize: 10,
    currentPage: 1
})
// 页面数据
const list = [
    {
        name: 'webSocket使用',
        key: 'activeIndex1'
    },
    {
        name: 'canvas使用',
        key: 'activeIndex2'
    },
    {
        name: '页面3',
        key: 'activeIndex3'
    },
    {
        name: '页面4',
        key: 'activeIndex4'
    },
]
// 点数据
const points = [
    { x: 185, y: 5 },
    { x: 275, y: 5 },

    { x: 275, y: 185 },
    { x: 455, y: 185 },

    { x: 455, y: 275 },
    { x: 275, y: 275 },

    { x: 275, y: 455 },
    { x: 185, y: 455 },

    { x: 185, y: 275 },
    { x: 5, y: 275 },

    { x: 5, y: 185 },
    { x: 185, y: 185 },
    { x: 185, y: 5 },
];
// 监听item
const observe = () => {
    let observer = new IntersectionObserver(function (entries, observer) {
        // entries 是一个 IntersectionObserverEntry 对象数组，包含所有被观察目标的信息
        entries.forEach(function (entry) {
            // entry 是一个 IntersectionObserverEntry 对象，描述了目标元素的交叉状态信息
            if (entry.isIntersecting) {
                activeIndex.value = entry.target.id
            } else {
                // console.log('目标元素离开视口');
            }
        });
    }, {
        threshold: 0.4 // 50% 可见度触发
    });
    const item = Array.from(document.querySelectorAll('.item'))
    const firstItem = Array.from(document.querySelectorAll('.firstItem'))
    let arr = [...firstItem, ...item]

    arr.forEach(item => {
        observer.observe(item)
    })
}
const handleSelect = (value) => {
    document.getElementById(value).scrollIntoView({
        behavior: 'smooth' // 平滑滚动
    });
    activeIndex.value = value
}
// 使用webSocket
const { isConnected, heartConnected, messages, connect, sendMessage, disconnect } = useWebSocket('ws://localhost:8080')
const openSocket = () => {
    connect()
}
const closeSocket = () => {
    disconnect()
}
// 页面变化
const pageChange = (currentPage: number, pageSize: number) => {
    pageOption.currentPage = currentPage
    pageOption.pageSize = pageSize
    console.log(messages.slice((pageOption.currentPage - 1) * pageOption.pageSize, pageOption.currentPage * pageOption.pageSize))
}
// 初始化canvas
const initCanvas = () => {
    let canvas: HTMLCanvasElement | null = document.getElementById('myCanvas') as HTMLCanvasElement;
    let cxt: CanvasRenderingContext2D | null = canvas.getContext('2d') as CanvasRenderingContext2D;
    // 修改直线的颜色
    cxt.strokeStyle = 'red'
    // 设置填充颜色
    cxt.fillStyle = '#d3d3d3';
    // 、绘制图形
    points.forEach(({ x, y }, index) => {
        if (index === 0) {
            cxt.moveTo(x, y)
        } else if (index === points.length - 1) {
            cxt.lineTo(x, y)
            cxt.fill()  // 填充矩形
            cxt.stroke() // 将起点和终点连接起来
        } else {
            cxt.lineTo(x, y)
        }
    })
}
// 页面挂载
onMounted(() => {
    observe()
    initCanvas()
})
const exit = () => {
    router.push('/');
}
const clickUserInfo = () => {
    ElMessage({
        message: `待开发～～`,
        type: 'warning',
    })
}

</script>
